<template>
  <div class="view-container">
    <el-card shadow="hover">
      <el-row :gutter="10" v-if="currentPage==='info'">
        <el-col :span="6">
          <div class="avatar-show">
            <div class="avatar-title">当前头像</div>
            <el-avatar :src="userInfo.avatar" size="large" class="user-avatar" radius></el-avatar>
            <br>
            <el-upload :auto-upload="false" action="" :on-change="onProgress" ref="avatarUpload">
              <el-button type="primary">更换头像</el-button>
            </el-upload>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="form-container">
            <el-form :model="userInfo" label-width="auto">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="userInfo.username" disabled></el-input>
              </el-form-item>
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="userInfo.nickname"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="userInfo.userEmail"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="telephone">
                <el-input v-model="userInfo.userTelephone"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="userSex">
                <el-select v-model="userInfo.userSex" class="width-control">
                  <el-option v-for="item in dictValue.default_sex" :value="Number(item.dictKey)"
                             :label="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="modifyPersonal" style="margin: 0 auto">保存修改</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <div v-else-if="currentPage==='pwd'" class="pwd-div view-container">
        <el-form :model="pwdInfo" label-width="auto" ref="modifyPwd">
          <el-form-item label="当前密码" prop="currentPwd">
            <el-input v-model="pwdInfo.currentPwd" type="password" password></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPwd">
            <el-input v-model="pwdInfo.newPwd" type="password" password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPwd">
            <el-input v-model="pwdInfo.confirmPwd" type="password" password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="margin:0 auto" @click="handleModifyPwd">保存修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import {getPersonalInfo, modifyPassword, modifyPersonalInfo} from "@/api/sysUser.js";
import {onMounted} from "vue";
import {getDict} from "@/util/dict.js";
import {useRoute} from "vue-router";
import {ElNotification} from "element-plus";

defineOptions({
  name: 'personalHub',
})
const dicts = ["default_sex"]

const userInfo = ref({
  username: "",
  nickname: "",
  userEmail: "",
  userTelephone: "",
  userSex: ""
})

const pwdInfo = ref({
  currentPwd: "",
  newPwd: "",
  confirmPwd: ""
})
const dictValue = ref({})
const avatarUpload = ref()
const route = useRoute()
const currentPage = ref(route.params.page)


const modifyPwd = ref()

const getUserInfo = () => {
  getPersonalInfo().then(res => {
    userInfo.value = res.data
  })
}

const modifyPersonal = () => {
  modifyPersonalInfo(userInfo.value).then(res => {
    if (res.code === 200) {
      ElNotification({
        title: "保存成功",
        type: "success"
      })
      getUserInfo();
    }
  })
}

const handleModifyPwd = () => {
  modifyPwd.value.validate((isValidate, model, errors) => {
    if (isValidate) {
      modifyPassword(pwdInfo.value).then(res => {
        if (res.code === 200) {
          ElNotification({
            title: "保存成功",
            type: "success"
          })
        }
      })
    }
  });
}

const onProgress = (evt,uploadFile) => {
  const reader = new FileReader();
  reader.readAsDataURL(evt.raw);
  reader.onload = () => {
    const base64 = reader.result;
    if (base64){
      let param = {
        avatar: base64
      }
      modifyPersonalInfo(param).then(res => {
        if (res.code === 200) {
          ElNotification({
            title: "保存成功",
            type: "success"
          })
          getUserInfo();
        }
      })
    }
  };
  reader.onerror = () => {
    console.error('文件读取失败');
  };
}
onMounted(() => {
  getUserInfo()
  dictValue.value = getDict({ type: {dicts} })
})

watch(() => route.params.page, (newPage) => {
  currentPage.value = newPage
})



</script>


<style>
.avatar-show {
  height: 50vh;
  text-align: center;
  border-right: #dddddd 1px dashed;
}

.user-avatar {
  height: 25vh !important;
  width: 25vh !important;
  margin-top: 5vh;
  margin-bottom: 5vh
}

.avatar-title {
  margin-top: 5vh;
  font-size: xx-large;
  font-weight: bolder;
}

.form-container {
  margin-left: 5vh;
  margin-top: 5vh;
}

.pwd-div {
  width: 70%;
  margin: 0 auto
}
</style>
